<template>
  <div id="home">
    <img src="../assets/img/图层675@2x.png" alt="" />
    <div class="grid">
      <div class="item" @click="onGrid($event, 0)">
        <span>线上预约</span>
        <img src="../assets/img/线上@2x.png" alt="" />
      </div>
      <div class="item" @click="onGrid($event, 1)">
        <span>电话预约</span>
        <img src="../assets/img/电话@2x.png" alt="" />
      </div>
      <div class="item" @click="onGrid($event, 2)">
        <span>我的订单</span>
        <img src="../assets/img/我的@2x.png" alt="" />
      </div>
      <div class="item" @click="onGrid($event, 3)">
        <span>我的地址</span>
        <img src="../assets/img/地址@2x.png" alt="" />
      </div>
    </div>
    <img src="../assets/img/回收流程@2x.png" alt="" />
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      if (newPath == "/home") {
        window.onscroll = null;
      }
    },
  },
  methods: {
    callPhone(phone) {
      var a = document.createElement("a");
      a.href = "tel:" + phone;
      var event;
      if (window.MouseEvent) {
        event = new MouseEvent("click");
      } else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      a.dispatchEvent(event);
    },
    onGrid(e, grid) {
      console.log(grid);
      switch (grid) {
        case 0:
          this.$router.push({
            name: "OnlineBooking",
          });
          break;
        case 1:
          this.callPhone("0571-83691082");
          break;
        case 2:
          this.$router.push({
            name: "MyOrder",
          });
          break;
        case 3:
          this.$router.push({
            name: "MyAddress",
          });
          break;
      }
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
#home {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  img {
    &:first-of-type {
      width: 100%;
    }
    &:nth-of-type(2) {
      width: 19.25rem /* 308/16 */;
      height: 7.75rem /* 124/16 */;
      margin-top: 1.25rem /* 20/16 */;
    }
  }
  .grid {
    display: grid;
    grid-template-columns: calc(9.25rem /* 148/16 */ /* 10/16 */) calc(
        9.25rem /* 148/16 */ /* 10/16 */
      );
    grid-template-rows: 4.375rem /* 70/16 */ 4.375rem /* 70/16 */;
    justify-content: center;
    row-gap: 0.625rem /* 10/16 */;
    column-gap: 0.625rem /* 10/16 */;
    .item {
      background-color: #ccc;
      width: 100%;
      height: 100%;

      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 1.40625rem /* 22.5/16 */ 0 0.96875rem /* 15.5/16 */;
      span {
        color: #fff;
        font-size: 15px;
        font-weight: bold;
      }
      img {
        width: 1.40625rem /* 22.5/16 */;
        height: 1.6875rem /* 27/16 */;
      }

      &:first-of-type {
        background: url("../assets/img/线上预约@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      &:nth-of-type(2) {
        background: url("../assets/img/电话预约@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      &:nth-of-type(3) {
        background: url("../assets/img/我的订单@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      &:nth-of-type(4) {
        background: url("../assets/img/我的地址@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
